<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h2>Bubbles</h2>
  <img src="./soap.png" class="soap" />
</body>
<script>
  document.addEventListener('mousemove', (event) => {
    let soap = document.querySelector('.soap')

    soap.style.left = `${event.pageX}px`
    soap.style.top = `${event.pageY}px`

    let iEl = document.createElement('i')
    iEl.style.left = `${event.pageX}px`
    iEl.style.top = `${event.pageY}px`
    iEl.style.scale = `${Math.random() * 2 + 1}`
    iEl.style.setProperty('--x', getRandomPosition())
    iEl.style.setProperty('--y', getRandomPosition())

    function getRandomPosition() {
      return `${Math.random() * 400 - 200}px`
    }

    document.body.appendChild(iEl)

    setTimeout(() => {
      document.body.removeChild(iEl)
    }, 2000)
  })
</script>

</html>